import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:xinxuan/common/bar_util.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xinxuan/common/scroll_configuration_common.dart';
import 'package:xinxuan/controllers/common_page_controller.dart';
import 'package:xinxuan/controllers/service_controller/service_page_controller.dart';
import 'package:xinxuan/router/app_routers.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:get/get.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:xinxuan/vo/articles_list_vo.dart';

class ServicePage extends StatelessWidget {

  final CommonPageController commonPageController = Get.find();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: pageBgColor,
      appBar: AppBarUtil(
        title: '客服',
        showLeading: false,
        backgroundColor: pageBgColor,
      ),
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 44.w, vertical: 12.h),
            alignment: Alignment.center,
            color: bgWhiteColor,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                _serviceItem('assets/icons/icon_customer_service.png', '电话客服', () {
                  launch('tel://${commonPageController.versionData.value.customerService}');
                }),
                _serviceItem('assets/icons/icon_online_customer_service.png', '在线客服', () async {
                  commonPageController.openWeChatCustomerServiceChat();
                }),
                _serviceItem('assets/icons/icon_feedback.png', '反馈投诉', () {
                  Get.toNamed('${AppRouters.COMMON_PAGE}${AppRouters.FEEDBACK_PAGE}');
                }),
              ],
            ),
          ),
          SizedBox(height: 12.h),
          Container(
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  color: lineColor1,
                  width: 1.w
                )
              )
            ),
            child: BarUtil(
              title: '常见问题',
              bgColor: bgWhiteColor,
              height: 65.h,
            ),
          ),
          Expanded(
            child: GetBuilder<ServicePageController>(
              init: ServicePageController(),
              builder: (controller) {
                return ScrollConfigurationCommon(child: ListView(
                  padding: EdgeInsets.only(bottom: 32.h),
                  children: controller.articleArr.asMap().keys.map((index) {
                    ArticlesItem item = controller.articleArr[index];
                    return InkWellUtil.shakeProofInkWell(Container(
                      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
                      decoration: BoxDecoration(
                        color: bgWhiteColor,
                        border: Border(
                          bottom: (index + 1) == controller.articleArr.length ? BorderSide.none : BorderSide(
                            width: 1.w,
                            color: lineColor1
                          )
                        )
                      ),
                      child: Row(
                        children: [
                          Expanded(child: Container(
                            child: Text(
                              item.title ?? '',
                              overflow: TextOverflow.ellipsis,
                              maxLines: 2,
                              style: TextStyle(
                                color: textBlackColor,
                                fontSize: 14.sp
                              ),
                            ),
                          )),
                          Image.asset(
                            'assets/icons/icon_arrow_right.png',
                            width: 14.w,
                            height: 14.w,
                          )
                        ],
                      ),
                    ), () {
                      Get.toNamed(
                        '${AppRouters.COMMON_PAGE}${AppRouters.ARTICLE_DETAIL_PAGE}',
                        arguments: {
                          'articleId': item.id,
                          'title': '${item.title}'
                        }
                      );
                    });
                  }).toList(),
                ));
              },
            ),
          )
        ],
      ),
    );
  }

  /// 客服Item
  Widget _serviceItem(String iconPath, String title, GestureTapCallback onTap) {
    return InkWellUtil.shakeProofInkWell(Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 50.w,
          height: 50.w,
          child: Center(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(50.w),
              child: Image.asset(
                iconPath,
                width: 44.w,
                height: 44.w,
              ),
            ),
          ),
        ),
        SizedBox(height: 6.h),
        Text(
          title,
          style: TextStyle(
            color: textBlackColor,
            fontSize: 14.sp
          ),
        )
      ],
    ), () => onTap());
  }
}